<script setup lang="ts">

import ClientUserNav from "@/components/ClientUserNav.vue";
import {House} from "@element-plus/icons-vue";
import router from "@/router";
import {onMounted, reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
import type {UploadProps} from 'element-plus'
import {useUserInfoStore} from "@/stores/client/user-info.ts";
import {getClientToken} from "@/utils/token.ts";
import UpdatePhoneForm from "@/components/UpdatePhoneForm.vue";
import UpdatePassword from "@/components/UpdatePassword.vue";
import {updateUserInfoApi} from "@/api/client/user.ts";

async function redirectToHome() {
  await router.push('/client/home')
}

let userInfoStore = useUserInfoStore();

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  if (response.code !== 2000) {
    ElMessage.warning(response.message)
  } else {
    userInfoStore.init()
  }
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  // if (rawFile.type !== 'image/jpeg') {
  //   ElMessage.error('Avatar picture must be JPG format!')
  //   return false
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error('Avatar picture size can not exceed 2MB!')
  //   return false
  // }
  return true
}
const heads = reactive({
  'Authorization': 'Bearer ' + getClientToken()
})

const updatePhoneDialog = ref(false)

const updatePhoneSteps = ref(0)

function setSteps() {
  if (updatePhoneSteps.value === 0) {
    updatePhoneSteps.value = 1
  } else {
    updatePhoneSteps.value = 0
  }
}

function closeUpdatePhoneDialog() {
  updatePhoneDialog.value = false
  ElMessage.success('修改手机号成功')
  userInfoStore.init()
}

const updatePasswordDialog = ref(false)

function closeUpdatePasswordDialog() {
  updatePasswordDialog.value = false
  ElMessage.success('修改密码成功')
}

const userInfo = reactive({
  username: ''
})

onMounted(async function () {
  if (userInfoStore.username === '') {
    await userInfoStore.init()
  }
  userInfo.username = userInfoStore.username
})

async function updateUserInfo() {
  try {
    await updateUserInfoApi(userInfo.username);
    await userInfoStore.init()
    ElMessage.success('保存成功')
  } catch (e:any) {
    ElMessage.error(e)
  }

}
</script>

<template>
  <div class="container">
    <div class="header">
      <div class="content">
        <div class="left">
          <el-button :icon="House" round @click="redirectToHome">首页</el-button>
        </div>
        <div class="right">
          <ClientUserNav/>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="content">
        <el-card>
          <el-form label-width="auto" style="width: 600px">
            <el-form-item label="头像" style="display: flex; align-items: center">
              <el-upload
                  class="avatar-uploader"
                  action="/client-request/user/info/avatar"
                  method="post"
                  :headers="heads"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
              >
                <el-avatar :src="userInfoStore.avatar" size="large"/>
              </el-upload>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="userInfo.username" style="width: 400px"/>
            </el-form-item>
            <el-form-item label="手机号">
              <div style="width: 500px; display: flex; justify-content: space-between">
                <el-input v-model="userInfoStore.phone" disabled style="width: 400px"/>
                <el-button round @click="updatePhoneDialog = true">修改</el-button>
              </div>
            </el-form-item>
            <el-form-item label="密码">
              <div style="width: 500px; display: flex; justify-content: space-between">
                <el-input value="******" disabled style="width: 400px"/>
                <el-button round @click="updatePasswordDialog = true">修改</el-button>
              </div>
            </el-form-item>
            <el-form-item>
                <div style="margin: 0 auto">
                  <el-button round type="primary" @click="updateUserInfo">保存</el-button>
                </div>
            </el-form-item>
          </el-form>

          <el-dialog
              v-model="updatePhoneDialog"
              width="400"
              align-center
          >
            <div style="width: 300px; margin: 0 auto">
              <el-steps style="width: 300px" :active="updatePhoneSteps" finish-status="success">
                <el-step title="解绑当前手机号"/>
                <el-step title="绑定新的手机号"/>
              </el-steps>
              <div class="updatePhone">
                <UpdatePhoneForm :step="updatePhoneSteps" @closeUpdatePhoneDialog="closeUpdatePhoneDialog" @setSteps="setSteps" :key="updatePhoneSteps"/>
              </div>
            </div>
          </el-dialog>

          <el-dialog
              v-model="updatePasswordDialog"
              width="400"
              align-center
          >
            <div style="width: 300px; margin: 0 auto">
              <div class="updatePassword">
                <UpdatePassword @closeUpdatePasswordDialog="closeUpdatePasswordDialog"/>
              </div>
            </div>
          </el-dialog>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100vw;

  .header {
    width: 100vw;
    height: 60px;
    background-color: #F8F9FA;
    display: flex;
    justify-content: center;

    .content {
      width: 1000px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .right {
      margin-right: 30px;
    }
  }

  .center {
    width: 100vw;

    .content {
      margin: 0 auto;
      width: 1000px;
      height: 200px;

      .el-card {
        width: 100%;
        .updatePhone {
          width: 100%;
        }
      }
    }
  }
}
</style>